<template>
  <div>
    <div class="card-group mb-3">
      <div v-for="(item, key) in userTasks" class="card card-hover" :key="key">
        <div class="card-body">
          <span class="task-title" :class="item.isCurrentTask ? 'font-weight-bold' : ''">
            {{ item.title }}
          </span>
          <div class="text-muted mb-2">
            <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
              <span>{{ subItem.prefix }}</span>
              <span :class="subItem.css">{{ subItem.num }}</span>
            </div>
          </div>
          <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
            <router-link :to="list.url" class="task-link">
              <div class="d-flex justify-content-between">
                <small>
                  <span class="mr-3">{{ list.title }}</span>
                  <span>{{ list.num }}</span>
                </small>
                <small>{{ list.funds }} 万元</small>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-bar-full"
                  :class="`bg-${list.bgColor}`"
                  :style="{ width: `${list.percent}%` }"
                ></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <h5 class="text-muted">{{ taskName }}</h5>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNumAndPercent } from '@/credit/views/city/self/Index'

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['job', 'taskCountHnd']),
    routeName() {
      return this.$route.name || ''
    },
    taskName() {
      const routes = this.$route.matched.slice(-2)
      return routes.map(item => item.meta.title).join('：')
    },
    tasks() {
      // 推荐
      const recommendTotal = getNumAndPercent(
        this.getValue('p'),
        this.getValue('p1'),
        this.getValue('p2')
      )
      const recommendFunds = getNumAndPercent(
        this.getValue('p3'),
        this.getValue('p4'),
        this.getValue('p5')
      )

      // 审查
      const prelimTotal = getNumAndPercent(
        this.getValue('p6'),
        this.getValue('p7'),
        this.getValue('p8')
      )
      const prelimFunds = getNumAndPercent(
        this.getValue('p9'),
        this.getValue('p10'),
        this.getValue('p11')
      )

      // 贷后
      const postloanTotal = getNumAndPercent(
        this.getValue('p12'),
        this.getValue('p13'),
        this.getValue('p14'),
        this.getValue('p15')
      )
      const postloanFunds = getNumAndPercent(
        this.getValue('p16'),
        this.getValue('p17'),
        this.getValue('p18'),
        this.getValue('p19')
      )

      return [
        {
          title: '项目推荐',
          job: ['org_corp', 'business_manager'],
          subTitle: [
            {
              prefix: '已添加项目：',
              num: recommendTotal.sum,
              css: '',
            },
          ],
          namePrefix: 'hndRecommend',
          list: [
            {
              title: '推荐项目',
              num: recommendTotal.data[0].count,
              percent: recommendTotal.data[0].percent,
              funds: recommendFunds.data[0].count,
              bgColor: 'success',
              url: { name: 'recommendPass' },
            },
            {
              title: '待确认项目',
              num: recommendTotal.data[1].count,
              percent: recommendTotal.data[1].percent,
              funds: recommendFunds.data[1].count,
              bgColor: 'info',
              url: { name: 'recommendNo' },
            },
            {
              title: '异常项目',
              num: recommendTotal.data[2].count,
              percent: recommendTotal.data[2].percent,
              funds: recommendFunds.data[2].count,
              bgColor: 'warning',
              url: { name: 'recommendRefuse' },
            },
          ],
        },
        {
          title: '项目审查',
          job: ['org_corp', 'business_manager'],
          subTitle: [
            {
              prefix: '已推荐项目：',
              num: recommendTotal.data[0].count,
              css: '',
            },
          ],
          namePrefix: 'hndPrelim',
          list: [
            {
              title: '未审项目',
              num: prelimTotal.data[0].count,
              percent: prelimTotal.data[0].percent,
              funds: prelimFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'hndPrelimNo' },
            },
            {
              title: '已审项目',
              num: prelimTotal.data[1].count,
              percent: prelimTotal.data[1].percent,
              funds: prelimFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'hndPrelimPass' },
            },
            {
              title: '异常项目',
              num: prelimTotal.data[2].count,
              percent: prelimTotal.data[2].percent,
              funds: prelimFunds.data[2].count,
              bgColor: 'warning',
              url: { name: 'hndPrelimRefuse' },
            },
          ],
        },
        {
          title: '签约放款',
          job: ['org_corp', 'business_manager'],
          subTitle: [
            {
              prefix: '已通过项目：',
              num: recommendTotal.data[0].count,
              css: '',
            },
          ],
          namePrefix: 'hndRegister',
          list: [
            {
              title: '已放款',
              num: recommendTotal.data[0].count,
              percent: recommendTotal.data[0].count ? 100 : 0,
              funds: recommendFunds.data[0].count,
              bgColor: 'success',
              url: { name: 'hndRegisterPass' },
            },
          ],
        },
        {
          title: '贷后管理',
          job: ['org_corp', 'business_manager'],
          subTitle: [
            {
              prefix: '已放款项目：',
              num: recommendTotal.data[0].count,
              css: '',
            },
          ],
          namePrefix: 'hndPostloan',
          list: [
            {
              title: '在保项目',
              num: postloanTotal.data[0].count,
              percent: postloanTotal.data[0].percent,
              funds: postloanFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'hndPostloaning' },
            },
            {
              title: '即将到期',
              num: `（${postloanTotal.data[1].count}）`,
              percent: postloanTotal.data[1].percent,
              funds: postloanFunds.data[1].count,
              bgColor: 'danger',
              url: { name: 'hndPostloanExpire' },
            },
            {
              title: '解保项目',
              num: postloanTotal.data[2].count,
              percent: postloanTotal.data[2].percent,
              funds: postloanFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'hndPostloanFinish' },
            },
            {
              title: '异常项目',
              num: postloanTotal.data[3].count,
              percent: postloanTotal.data[3].percent,
              funds: postloanFunds.data[3].count,
              bgColor: 'waning',
              url: { name: 'hndPostloanAbnormal' },
            },
          ],
        },
      ]
    },
    userTasks() {
      return this.tasks.filter(task => {
        const { job, namePrefix } = task
        task.isCurrentTask = this.routeName.includes(namePrefix)
        return !job || job.includes(this.job)
      })
    },
    userRouter() {
      return this.routeName && this.userTasks.length
        ? { name: this.routeName }
        : this.userTasks[0].list[0].url
    },
  },
  watch: {
    routeName(val) {
      if (!val) this.initTask()
    },
  },
  created() {
    this.$store.dispatch('getTaskCountHnd')
    this.$store.dispatch('getAccessData')
    this.initTask()
  },
  mounted() {},
  methods: {
    getValue(key) {
      const data = (this.taskCountHnd && this.taskCountHnd[0]) || {}
      return data[key]
    },
    initTask() {
      this.$router.replace(this.userRouter)
    },
  },
}
</script>
<style scoped lang="scss">
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;

  &:hover {
    border-color: lighten($primary, 35%);
    border-color: var(--primary-light-9);
    box-shadow: 0 2px 6px $gray-400;
  }
}

.bg-ondine {
  background-color: #40e0d0;
}

.task-link {
  color: $gray-600;
  &.exact-active {
    color: $primary;
    color: var(--primary);
  }
}
</style>
